<!DOCTYPE html>
<html class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="stylesheet" href="../css/font.css">
    <link rel="stylesheet" href="../lib/layui/css/layui.css">
    <link rel="stylesheet" href="../css/xadmin.css">
    <script src="../lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/ajax_plus.js"></script>
    <script type="text/javascript" src="../js/xadmin.js"></script>
    <script type="text/javascript" src="../data/selectData.js"></script>
</head>

<body>
<div class="x-nav">
            <span class="layui-breadcrumb">
                <a href="">首页</a>
                <a>
                    <cite>用户信息</cite></a>
            </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
    </a>
</div>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">
                    <div class="layui-form layui-col-space5">

                        <div class="layui-input-inline layui-show-xs-block">
                            <input type="text" id="name" placeholder="请输入雇员姓名" autocomplete="off" class="layui-input">
                        </div>

                        <div class="layui-input-inline layui-show-xs-block">
                            <select id="dept" title="部门">
                                <option value="0">请选择部门</option>
                            </select>
                        </div>
                        <div class="layui-input-inline layui-select-title">
                            <select id="posid" name="posid" title="职位">
                                <option value="0">请选择职位</option>
                            </select>
                        </div>

                        <div class="layui-input-inline layui-show-xs-block">
                            <input class="layui-input" placeholder="转正日期" id="conversionTime">
                        </div>

                        <div class="layui-input-inline layui-show-xs-block">
                            <button class="layui-btn" lay-submit="" lay-filter="sreach" id="searchEmp">
                                <i class="layui-icon">&#xe615;</i></button>
                        </div>
                    </div>
                </div>
                <div class="layui-card-header">
                    <button class="layui-btn" onclick="xadmin.open('添加用户','../emp-add.html' )">
                        <i class="layui-icon"></i>添加
                    </button>
                </div>
                <div class="layui-card-body ">
                    <table class="layui-table layui-form">
                        <thead>
                        <tr>
                            <th>雇员编号</th>
                            <th>工号</th>
                            <th>雇员姓名</th>
                            <th>电话号码</th>
                            <th>部门</th>
                            <th>职位</th>
                            <th>学历</th>
                            <th>转正日期</th>
                            <th>合同期限</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody class="datalist"></tbody>
                    </table>
                </div>

                <div class="layui-card-body ">
                    <div id="demo1"></div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    function displayDataList(list) {

        $('.datalist').empty()

        let html = ''
        for (let i = 0; i < list.length; i++) {
            html += `<tr>
                <td>${list[i].id}</td>
                <td>${list[i].workid}</td>
                <td>${list[i].name}</td>
                <td>${list[i].phone}</td>
                <td>${list[i].deptname}</td>
                <td>${list[i].posname}</td>
                <td>${list[i].tiptopdegree}</td>
                <td>${list[i].conversiontime}</td>
                <td>${list[i].contractterm}</td>
                <td class="td-manage">
                <a title="编辑" onclick="xadmin.open('编辑' , '../emp-edit.html?id=${list[i].id}')">编辑</a>
            </td></tr>`
        }
        $('.datalist').html(html)
    }

    function getData(pageNum) {

        let param = {
            "name" : $('#name').val(),
            "departmentid": $('#dept').val(),
            "posid": $('#posid').val(),
            "conversiontime": $('#conversionTime').val() == ''? null: $('#conversionTime').val(),
            "pageNumber": pageNum, "pageSize": 10
        }

        $.ajax({
            type: 'GET',
            url: '/emp/search',
            data: param,
            dataType: 'json',
            contentType: 'application/json;charset=utf-8',
            success: function (result) {
                displayDataList(result.data.list)
                layui.use(['laypage'], function () {

                    let page = result.data

                    layui.laypage.render({
                        elem: 'demo1',
                        count: page.total, // 数据的总数
                        curr: page.pageNum, // 当前页码
                        limit: page.pageSize, // 每页显示的数据量
                        jump: function (obj, first) {
                            if (!first) {
                                getData(obj.curr)
                            }
                        }
                    })
                })
            }, error : function(xhr){
                let data = JSON.parse( xhr.responseText)
                layer.msg( data.message )
            }
        })
    }

    layui.use(['laydate' , 'form'], function(){
        let laydate = layui.laydate;
        laydate.render({
            elem: '#conversionTime',//指定元素
            format: 'yyyy-MM-dd'
        });
    });

    document.getElementById('searchEmp').onclick = function(){
        getData(1)  // 无法保证查询条件和之前是一样的，所以没次查询都视为第一次数据检索
    }

    getData(1)  //页面打开的时候，第一页

    eachSelectData(['dept' , 'posid'] , true);


</script>

</html>